* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: #f7f7f7;
    opacity: 0; 
    transition: opacity 0.2s
}
body.active {
    opacity: 1
}
p {
    margin: 0;
    word-wrap:break-word; 
}
a{
    text-decoration: none;
    color: black;
}
//顶端搜索栏
.iot_top {
    position: fixed;
    z-index: 4;
    top: 0;
    width: 100%;
    height: 2.093rem;
    background-image: url(../icons/logo/navigator_bg.png);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    div {
        display: flex;
        align-items: center;
    }
    div img {
        width: 2.2481rem;
        height: .4845rem;
        margin: .1938rem .1938rem .1938rem .3876rem;
    }
    div span {
        font-size: .3101rem;color:white;
        border-left: .0194rem solid white;
        padding-left: .2326rem;
    }
    div div {
        position: relative;
        background-color: #80e2d0;
        width: 10rem;
        height: .8721rem;
        margin: .1938rem;
        border-radius: .8217rem;
    }
    div div::before {
        width: .3876rem;
        height: .3876rem;
        content: '';
        background-image: url(../icons/logo/search1.png);
        background-size:.4457rem;
        margin-left: .3488rem;
    }
    div div span {
        font-size: .3101rem;
        color:white;
        padding-left: .2326rem;
        border: 0;
    }
    div div::after {
        position: absolute;
        top: .2422rem;
        right: .2907rem;
        width: .3876rem;
        height: .3876rem;
        content: '';
        background-image: url(../icons/logo/scan.png);
        background-size: .3876rem;

    }
}
//banner区域
.swiper {
    width: 100%;
    height: 100%;
  }

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-pagination-horizontal>.swiper-pagination-bullet{
    width: .425rem;
    height: .0725rem;
    border: 0;
    margin:0 .0775rem .231rem;
    border-radius: .0581rem;
 }
 .swiper-pagination-horizontal>.swiper-pagination-bullet-active {
    background: #ffffff;
}
#iot_down{
    bottom: 0;
}
.iot_banner {
    width: 10rem;
    height: 3.7597rem;
    margin-top: 2.093rem;
    img {
        width: 10rem;
        height: 3.7597rem;
    }
}
//前台分类
.iot_nav {
    width: 10rem;
    height: 4.8837rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-evenly;
    a {
        width: 1.938rem;
        text-align: center;
        font-size: .3101rem;
        color: #666666;
        text-decoration: none;
    }
    img {
        width: 1.124rem;
        border-radius:.1163rem;
    }
}
//热门推荐
.iot_hot {
    width: 9.593rem;
    height: 6.8411rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    border-radius: .0291rem;
    justify-content: space-between;
    align-content: space-between;
    overflow: hidden;
    .iot_box {
        width: 4.7771rem;
        height: 3.4012rem;
        background-color: #fff;
        padding: .2907rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .iot_box div {
        height: .6202rem;
        display: flex;
        align-items: center;
    }
    .iot_box p {
        margin: 0;
    }
    .iot_box p:nth-child(1) {
        font-size: .3876rem;
    }
    .iot_box p:nth-child(2) {
        font-size: .2907rem;
        color: #7f7f7f;
        margin-left: .1938rem;
    }
    a {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    img {
        width: 1.9767rem;
        height: 1.9767rem;
    }
}
